<template>
  <div class="column fit">
    <q-bar class="row" style="background-color: transparent">
      <q-space style="width: 100px" />
      <div class="file-name non-selectable">filename.mp4</div>
      <q-space />
      <q-btn text-color="sub" dense flat icon="minimize" @click="emit('minimize')" />
      <q-btn text-color="sub" dense flat icon="mdi-arrow-expand" @click="emit('maximize')" />
      <q-btn text-color="sub" dense flat icon="close" @click="emit('close')" v-close-popup />
    </q-bar>
    <div class="col"></div>
    <q-separator />
    <div class="footer row justify-between">
      <q-stepper
        class="custom-videouploader-stepper"
        alternative-labels
        v-model="currentStep"
        color="sub"
        active-color="accent"
      >
        <q-step style="padding:0" title="Details" name="step2"></q-step>
        <q-step style="padding:0" title="Categorization" name="step3"></q-step>
        <q-step style="padding:0" title="Visability" name="step4"></q-step>
      </q-stepper>
      <div class="row items-center q-mr-md">
        <q-btn label="Skip" no-caps rounded color="accent" @click="emit('next')" />
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
  props: {
    file: {
      type: File,
      required: false,
    },
  },
  emits: ['minimize', 'maximize', 'close', 'next'],
  setup (props, { emit }) {
    const currentStep = ref('step3');
    return {
      currentStep,
      emit,
    };
  },
});
</script>
<style lang="sass" scoped>

.file-name
  font-size: 12px
  color: $sub
</style>
<style lang="sass">

.custom-videouploader-stepper
  border: none
  background-color: transparent
  padding: 0px
  .q-stepper__content
    display: none
  .q-stepper__title
    font-size: 10px
  .q-stepper__tab
    padding: 12px 24px
    min-height: 40px
</style>